<{include file="top.html" }>
<link href="<{$preStaticUrl}>Wap/css/photoswipe.css" rel="stylesheet" />
<link href="<{$preStaticUrl}>Wap/css/default-skin.css" rel="stylesheet" />
</head>
<body>
<div class="bgcolor"></div>
<div class="content">
    <header><a class="left_link" href="javascript:void(0);"></a>提交作业</header>
    <form id="task">
        <div class="Feel">
            <input type="hidden" value="<{$eid}>" name="eid"/>
            <textarea placeholder="分享你的感受..." id="content" name="content"><{$obj.content}></textarea>
            <dl><span id="textNum">0</span>/40</dl>
            <div class="clearfix" style="padding-bottom:1rem;">
                <span class="gallery FeelImg" id="upload">
                    <{if $obj.imgList}>
                        <{foreach from=$obj.imgList item=item}>
                            <a class="galleryAAAA" href="<{$item}>" data-size="100x100" data-med="<{$item}>" data-med-size="288x158">
                                <img src="<{$item}>" alt="">
                                <input type="hidden" value="<{$item}>" name="imgList[]"/>
                                <input type="button" class="Remove" value="" onclick='del(this)'>
                            </a>
                        <{/foreach}>
                    <{/if}>
                </span>
                <div class="AddPicture">
                    <div class="picture_box">
                        <a href="javascript:void(0);" class="a-upload">
                            <input type="file" name="file" id="img" onchange="selectImg(this)">+
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-button ui-button-2"><a href="javascript:void(0);" id="btn" style="color: #fff;
    display: block;
    border-radius: 2rem;
    background-image: -moz-linear-gradient(90deg, #f73c56 0%, #ff8098 100%);
    background-image: -webkit-linear-gradient(90deg, #f73c56 0%, #ff8098 100%);
    background-image: -ms-linear-gradient(90deg, #f73c56 0%, #ff8098 100%);
    box-shadow: 0.02rem 0.03rem 0.05rem 0px #ec708a;
    text-align: center;">提交作业</a></div>
    </form>
    <!-- 图片弹出模态框 -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>
        <div class="pswp__scroll-wrap">
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar" style="opacity:0;">
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <button class="pswp__button pswp__button--share" title="Share"></button>
                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__loading-indicator">
                    <div class="pswp__loading-indicator__line"></div>
                </div>
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip">
                        <a href="#" class="pswp__share--facebook"></a>
                        <a href="#" class="pswp__share--twitter"></a>
                        <a href="#" class="pswp__share--pinterest"></a>
                        <a href="#" download class="pswp__share--download"></a>
                    </div>
                </div>
                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<{include file="signBody.html"}>
</body>
</html>
<script src="<{$preStaticUrl}>js/jquery.ajaxfileupload.js"></script>
<script src="<{$preStaticUrl}>Wap/js/photoswipe.min.js"></script>
<script src="<{$preStaticUrl}>Wap/js/photoswipe-ui-default.min.js"></script>
<script src="<{$preStaticUrl}>Wap/js/initPhotoSwipeFromDOM.js"></script>
<script>initPhotoSwipeFromDOM('.gallery');</script>
<script type="text/javascript">
    function del(e){
        $(e).parent().remove();
        var imgLength = $("input[name='imgList[]']").length;
        if(imgLength < 4){
            $(".AddPicture").css("display",'inline-block');
        }
    }
    $("#content").on('keyup',function(){
        var length = $(this).val().length;
        if(length > 39){
            $(this).val($(this).val().substring(0,40));
        }
        $("#textNum").text(length);
    });

    //图片上传
    //    用于压缩图片的canvas
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext('2d');
    //  获取图片信息
    function selectImg(e){
        var file = e.files[0];
        if(!file){
            return false;
        }
        var size = file.size;   //注意，这里读到的是字节数
        if(size > 3145728){     //3MB
            layer.msg('上传图片大于3M，<br/>请重新选择小于3M的图片后重试');
            return false;
        }
        layer.msg("上传中……",{time:5000});
        var reader = new FileReader();
        reader.onload = function(a){
            var result = a.target.result;
//            var img = new Image();
//            img.src = result;
//            var data = compress(img);
            uploadBase64IMG(result);
        };
        reader.readAsDataURL(file);
    }

    function uploadBase64IMG(imgDataUrl,func){
        $.post('./api.php?m=Api&c=index&a=base64upload&from=IMG_EVENT_TASK_SUBMIT',{dataURL:imgDataUrl},
                function(result){
                    if(result.status!=0){
                        layer.msg(result.msg);
                    }else{
                        layer.msg("上传成功");
                        $('#upload').append("<a class='galleryAAAA' href='"+result.url+"'' data-size='100x100' data-med='"+result.url+"'' data-med-size='288x158'><img src='"+result.url+"'><input type='hidden' value='"+result.url+"' name='imgList[]'  /><input type='button' class='Remove' onclick='del(this)'/></a>");
                        var imgLength = $("input[name='imgList[]']").length;
                        if(imgLength >=4) {
                            $(".AddPicture").css("display",'none');
                            layer.msg("至多只能上传4张图片");
                        }
                    }
                },'json'
        );
    }
    function compress(img) {
        var width = img.width;
        var height = img.height;
        var scale = width/height;

        var finalWidth = 640;
        var finalHeight = parseInt(finalWidth/scale);
        canvas.width = finalWidth;
        canvas.height = finalHeight;
        ctx.drawImage(img,0,0,width,height,0,0,finalWidth,finalHeight);
        var ndata = canvas.toDataURL("image/jpeg", 0.5);
        return ndata;
    }

        //提交
    $('#btn').on('click',function(){
        var content = $('#content').val();
        var imgList = $("input[name='imgList[]']");
        var task = $("#task").serialize();

        if(content.length < 1){
            layer.msg("请输入分享内容");
            return false;
        } else if(imgList.length<1){
            layer.msg("请上传至少一张图片后提交");
            return false;
        } else if(imgList.length>4){
            layer.msg("请上传至多四张图片后提交");
            return false;
        }

        var url = "<{U('Events/submitTask')}>";
        $.getJSON(url,task,function(data){
            if(data.status !=0){
                layer.msg(data.msg);
            } else {
                layer.msg("作业提交成功");
                window.history.go(-1);
            }
        });
    });
</script>

